<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{ position: headerPosition, top: headerTop }">
			<view class="grid" v-for="(grid, tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex == tabbarIndex ? 'on' : '']">{{ grid }}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="orderList.length == 0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">{{i18n.noRelatedOrders}}</view>
				</view>
				<view class="row" v-for="(row, index) in orderList" :key="index" @click="toOrderDetail(row)">
					<view class="order-info">
						<view class="right">
							<view class="name">{{i18n.orderNumber}}：{{ row.code }}</view>
							<view class="spec">{{i18n.serialNumber}}：{{ row.serialNumber }}</view>
							<view class="spec">{{i18n.customer}}：{{ row.name }}</view>
							<view class="spec">{{i18n.currency}}：{{ row.currencyTypeCode }}</view>
							<view class="spec">{{row.dateStr}}</view>
							<view class="price-number flex_sb">
								<view class="innerMoney">
									<view class="price">{{i18n.amount}}：{{ row.amount }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="btns">
						<block>
							<view class="default" @tap="cancelOrder(row)">{{i18n.cancelOrder}}</view>
						</block>
						<block v-if="row.type == 'back'">
							<view class="default" @tap="remindDeliver(row)">{{i18n.remindShipping}}</view>
						</block>
						<block v-if="row.type == 'unreceived'">
							<view class="default" @tap="showLogistics(row)">{{i18n.viewLogistics}}</view>
							<view class="pay">{{i18n.confirmReceipt}}</view>
							<view class="pay">{{i18n.return}}</view>
						</block>
						<block v-if="row.type == 'received'">
							<view class="default">{{i18n.evaluate}}</view>
							<view class="default">{{i18n.buyAgain}}</view>
						</block>
						<block v-if="row.type == 'completed'">
							<view class="default">{{i18n.buyAgain}}</view>
						</block>
						<block v-if="row.type == 'refunds'">
							<view class="default">{{i18n.viewProgress}}</view>
						</block>
						<block v-if="row.type == 'cancelled'">
							<view class="default">{{i18n.cancelled}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		computed: {
			i18n() {
				// 倒入你需要的对象
				return this.$t('order_list')
			}
		},
		data() {
			return {
				headerPosition: 'fixed',
				headerTop: '0px',
				typeText: {
					unpaid: '等待付款',
					// back: '等待商家发货',
					unreceived: '商家已发货',
					received: '等待用户评价',
					completed: '交易已完成',
					refunds: '商品退货处理中',
					cancelled: '订单已取消'
				},
				orderType: ['全部', '待收货'],
				//订单列表 演示数据
				orderList: [],
				list: [],
				tabbarIndex: 0,
				token: '',
				microShopId: ''
			};
		},
		onLoad(option) {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}

			//option为object类型，会序列化上个页面传递的参数
			console.log('option: ' + JSON.stringify(option));
			let tbIndex = parseInt(option.tbIndex);
			this.list = this.orderList[tbIndex];
			this.tabbarIndex = tbIndex;
			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			const token = uni.getStorageSync('token');
			if (token) {
				this.token = token;
				console.log(token);
			}
			this.getLanguage();
			this.getOrderList(token);
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
		},
		methods: {
			getOrderList(token) {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/ecOrder/list', //获取购物车列表
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						pageNum: 1,
						pageSize: 10,
						orderState: "waitDeliverGoods"
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'token': token,
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data);
						this.orderList = res.data.data.list;
					}
				});
			},
			getLanguage() {
				var that = this;
				console.log(that.$i18n.locale)
				if (that.$i18n.locale === 'zh-CN') {
					uni.setNavigationBarTitle({
						title: '我的订单'
					});
				} else if (that.$i18n.locale === 'en-US') {
					uni.setNavigationBarTitle({
						title: 'My order'
					});
				}
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.list = this.orderList[tbIndex];
			},
			showLogistics(row) {},
			remindDeliver(row) {
				uni.showToast({
					title: '已提醒商家发货'
				});
			},
			cancelOrder(row) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.doCancelOrder(row.ordersn);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			doCancelOrder(ordersn) {
				let typeNum = this.orderList.length;
				for (let i = 0; i < typeNum; i++) {
					let list = this.orderList[i];
					let orderNum = list.length;
					if (orderNum > 0 && list[0].type == 'unpaid') {
						for (let j = 0; j < orderNum; j++) {
							if (this.orderList[i][j].ordersn == ordersn) {
								this.orderList[i][j].type = 'cancelled';
								break;
							}
						}
					}
				}
			},
			toOrderDetail(order){
				uni.setStorage({
					key: 'order',
					data: order,
					success: () => {
						uni.navigateTo({
							url: '../../order/orderInfo'
						})
					}
				})
				console.log(order)
			},
			
			toPayment(row) {
				//本地模拟订单提交UI效果
				uni.showLoading({
					title: '正在获取订单...'
				});
				let paymentOrder = [];
				paymentOrder.push(row);
				setTimeout(() => {
					uni.setStorage({
						key: 'paymentOrder',
						data: paymentOrder,
						success: () => {
							uni.hideLoading();
							uni.navigateTo({
								url: '../../pay/payment/payment?amount=' + row.payment
							});
						}
					});
				}, 500);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f8f8f8;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 40upx;
				padding: 0 10upx;
				display: flex;
				align-items: center;

				&.on {
					color: #fff;
					border-radius: 30upx;
					background: linear-gradient(to right, #e6ce76, #c9a66a);
				}
			}
		}
	}

	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 20vw;
					height: 20vw;
					border-radius: 100%;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #444;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: calc(100% - 40upx);
				padding: 10upx 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 20upx;

				.type {
					font-size: 26upx;
					color: #ec652f;
					// height: 50upx;
					// display: flex;
					// align-items: center;
					text-align: right;
				}

				.order-info {
					width: 100%;
					display: flex;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 25vw;

						image {
							width: 25vw;
							height: 25vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 10upx;
						position: relative;

						.name {
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.spec {
							color: #666;
							font-size: 22upx;
						}

						.price-number {
							position: absolute;
							bottom: 0;
							width: 100%;
							display: flex;
							// justify-content: flex-end;
							font-size: 22upx;
							color: #333;
							display: flex;
							align-items: flex-end;

							.time {
								color: #666;
							}

							.innerMoney {
								margin-left: auto;
								flex-shrink: 0;
								display: flex;
							}

							.price {
								font-size: 24upx;
								margin-right: 5upx;
							}
						}
					}
				}

				.detail {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					height: 60upx;
					font-size: 26upx;

					.sum {
						padding: 0 8upx;
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 30upx;
						}
					}
				}

				.btns {
					height: 60upx;
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					view {
						min-width: 120upx;
						height: 50upx;
						padding: 0 20upx;
						border-radius: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #ccc;
						color: #666;
					}

					.pay {
						border: solid 1upx #ec652f;
						color: #ec652f;
					}
				}
			}
		}
	}
</style>
